<template>
    <div class="from-date-group">
        <a-input-group compact>
            <a-select :value="selectValue" style="width:30%;margin-top:1px" @change="changeItem" :size="size">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="今日">今日</a-select-option>
                <a-select-option value="昨日">昨日</a-select-option>
                <a-select-option value="本周">本周</a-select-option>
                <a-select-option value="上周">上周</a-select-option>
                <a-select-option value="本月">本月</a-select-option>
                <a-select-option value="上月">上月</a-select-option>
                <a-select-option value="本季度">本季度</a-select-option>
                <a-select-option value="上季度">上季度</a-select-option>
                <a-select-option value="自定义">自定义</a-select-option>
            </a-select>
            <a-input v-if="selectValue == ''" :disabled="true" style="width:70%;height:28px;" value='全部'></a-input>
            <a-range-picker v-else-if="selectValue != '自定义'" style="width:70%;color:#222 !important;" :disabled="selectValue != '自定义'" @change="onChange" format="YYYY-MM-DD" :show-time="{
                                                    hideDisabledOptions: true,
                                                    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],}" :value="[moment(beginDate, 'YYYY-MM-DD'), moment(endDate, 'YYYY-MM-DD')]">
            </a-range-picker>
            <a-range-picker v-else style="width:70%;" id="timeFocus" @change="onChange" format="YYYY-MM-DD HH:mm:ss" :show-time="{
                                                    hideDisabledOptions: true,
                                                    defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],}" :value="[moment(beginDate, 'YYYY-MM-DD'), moment(endDate, 'YYYY-MM-DD')]">
            </a-range-picker>
        </a-input-group>
    </div>
</template>

<script>
import moment from "moment";
import getDate from "@/utils/tool/date";

export default {
    data() {
        return {
            // beginDate: this.moment(),          //开始日期
            // endDate: this.moment(),            //结束日期
        }
    },
    props: {
        code: {//日期字段
            type: String,
            default: ''
        },
        selectValue: {
            type: String,
            default: ''
        },
        beginDate: {
            type: Date,
            default: ''
        },
        endDate: {
            type: Date,
            default: ''
        },
    },

    computed: {

    },
    methods: {
        // onChange(date, dateString) {
        //     this.$emit("input", dateString);
        //     this.$emit("update:momentDate", date);
        // },
        moment,
        onChange(date, dateString,zdy) {
            if(zdy == 'zdy'){
                this.isOpen = !this.isOpen;
            }
            console.log("日期范围：date", date, "dateString", dateString);
            this.beginDate = dateString[0];
            this.endDate = dateString[1];

            let returnData = [];
            returnData[0] = this.selectValue;
            returnData[1] = dateString;

            this.$emit("input", returnData, this.code);
        },
        changeItem(value) {
            let beginDate, endDate;
            this.selectValue = value;
            this.localSelectValue = value;
            this.isOpen = false;
            switch (value) {
                case "今日":
                    beginDate = getDate.getToday().starttime;
                    endDate = getDate.getToday().endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "昨日":
                    beginDate = getDate.getYesterday().starttime;
                    endDate = getDate.getYesterday().endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "本周":
                    beginDate = getDate.getCurrWeekDays().starttime;
                    endDate = getDate.getCurrWeekDays().endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "上周":
                    beginDate = getDate.getLastWeekDays().starttime;
                    endDate = getDate.getLastWeekDays().endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "本月":
                    beginDate = getDate.getCurrMonthDays().starttime;
                    endDate = getDate.getCurrMonthDays().endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "上月":
                    beginDate = getDate.getLastMonthDays().starttime;
                    endDate = getDate.getLastMonthDays().endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "本季度":
                    beginDate = getDate.getCurrQuarter().starttime;
                    endDate = getDate.getCurrQuarter().endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "上季度":
                    beginDate = getDate.getLastQuarter().starttime;
                    endDate = getDate.getLastQuarter().endtime;
                    this.onChange([], [beginDate, endDate]); break;
                case "自定义":
                    this.$nextTick(() => {
                        beginDate = this.moment();
                        endDate = this.moment();
                        this.onChange([], [beginDate, endDate],'zdy');

                        document.getElementById('timeFocus').click();
                    })
                    break;
                default:
                    beginDate = "";
                    endDate = "";
                    this.onChange([], [beginDate, endDate]); break;
            }
        },
    }
};
</script>
<style lang="less">
.from-date-group {
    .ant-calendar-picker-input {
        height: 28px;
    }
}
</style>
